{% load staticfiles %}
<html>
  <head>
    <link rel="stylesheet" href="{% static 'css/pure.css' %}">
    <link rel="stylesheet" href="{% static 'css/pure_response.css' %}">
    <style type='text/css'>
      .mobike-container {
        margin: 300px auto 0 auto;
      }
      #mobike-logo {
        display: block;
        margin:0 auto; 
      }
      .join {
        font-size: 25px; 
        color: #eb5d4a;
        font-weight: bold;
      }
      .outer-join {
        text-align: center; 
      }

    </style>
  </head>
  <body style="background-image: url('https://git.oschina.net/kekeblom/bikechain/raw/master/public/images/iPhoneGray.png'); background-position: 45% 20%; height: 1500px">
    <div class="mobike-container">
      <div class="pure-g">
          <div class="pure-u-1-3"></div>
          <div class="pure-u-1-3">
            <img id="mobike-logo" src="https://git.oschina.net/kekeblom/bikechain/raw/master/public/images/mobike-ex.png" />
          </div>
          <div class="pure-u-1-3"></div>
          </div>
      </div>
      <div class="pure-g challenges-list">
        <div class="out-div pure-u-1-1" style="margin: 0 auto; width: 650px;">
          <div class="base-div" style="background-color: white; border-radius: 5px; width: 95%; margin:0 auto;">
            <div class="images-div" style="float: left;">
                <img class="images-content" src="https://git.oschina.net/kekeblom/bikechain/raw/master/public/images/starbucks.png" style="width: 175px; height: 175px; border-radius: 50%; padding: 10px;" />
            </div>
            <div class="details-div">
              <div class="title-div">
                <p class="title-text" style="font-size: 24px; padding-top: 20px;">
                  Starbucks Bike Master
                </p>
              </div>
              <div class="description-div" style="color: gray; font-size:14px; width: 90%;">
                Who will make the most trips in one week? Ask your friend to join! It's Awesome!!!
              </div>
              <div class="avatar-div" style="width: 90%; margin-top: 10px;">
                  <img src="https://git.oschina.net/kekeblom/bikechain/raw/master/public/images/ken.jpeg" style="width: 50px; height: 50px; border-radius: 50%;"/>
                  <img src="https://git.oschina.net/kekeblom/bikechain/raw/master/public/images/aleksi.jpeg" style="width: 50px; height: 50px; border-radius: 50%;"/>
                  <img src="https://git.oschina.net/kekeblom/bikechain/raw/master/public/images/windson.jpeg" style="width: 50px; height: 50px; border-radius: 50%;"/>
              </div>
            </div>
          </div>
          <div class="outer-div" style=" background: white; border-radius: 5px; width: 95%; margin:0 auto; height:780px;">
          <div style="text-align:center; font-size:25px;">
              <p style="font-size: 30px; font-weight: bold;">Your challenge is <br>Ride a mobike in one minute! </p>
          </div><!-- details -->
          <div class="unlock-logo">
            <img class="unlock-content" src="https://git.oschina.net/kekeblom/bikechain/raw/master/public/images/ring.png" style="width: 235px; height: 235px; display: block; margin: 0 auto; margin-top: 100px; cursor: pointer" />
          </div>
          <div class="outer-join">
            <p class="join">JOIN THE CHALLENGE NOW!</p>
          </div>
        </div>
      </div>
      </div>
    </div>
    <script src="{% static 'scripts/jQuery.min.js' %}"></script>
    <script>
      $(document).ready(function() {
          $(".unlock-logo").on("click", function(){
            $.ajax({
              url: "/api/open/",
              type: "GET",
              datatype: "json",
              beforeSend:function(){
            },
            success: function(data) { 
               window.location = "http://127.0.0.1/api/success/";
            },
            error: function() {
            }
          });
       });
      });
    </script>

  </body>
</html>
